<template>
  <div>
    <BasicModal
      @register="register"
      title="设备分配"
      width="600px"
      :destroyOnClose="true"
      :canFullscreen="false"
      :showOkBtn="false"
      :showCancelBtn="false"
    >
      <BasicForm @register="registerForm" />
      <div style="height: 30px"></div>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicForm, useForm } from '@/components/Form';
  import { ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { DeviceDispense } from '@/api/device/deviceList';
  import Dictionary from '@/utils/dictionary';
  import { list } from '@/api/institution/list';
  import { IDeviceDispenseData } from '@/api/device/deviceList/type';
  import { DispenseStatusEnum, DispenseTypeEnum } from '@/enums/device';
  import { useUserStore } from '@/store/modules/user';

  const { createMessage } = useMessage();

  const userStore = useUserStore();

  const emit = defineEmits(['reload']);

  const dicts = Dictionary.getLocalMulti(['dispenseType']);

  const tenantAfterName = ref();

  const [registerForm, { validate, setProps, setFieldsValue, clearValidate }] = useForm({
    schemas: [
      {
        field: 'printerNo',
        component: 'Input',
        required: true,
        label: '设备编号',
        componentProps: {
          disabled: true,
        },
      },
      {
        field: 'tenantAfter',
        component: 'ApiSelect',
        required: true,
        label: '分配机构',
        componentProps: {
          api: list,
          params: { current: 1, size: 10000 },
          labelField: 'orgName',
          valueField: 'tenantId',
          showSearch: true,
          filterOption: (input: string, option: any) => {
            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
          },
          onSelect: (val, option) => {
            console.log('e--->', val);
            tenantAfterName.value = option.label;
            clearValidate(['tenantAfter']);
          },
        },
      },
      {
        field: 'dispenseType',
        component: 'RadioGroup',
        label: '分配方式',
        componentProps: {
          options: dicts.dispenseType.map((v) => ({
            label: v.dictLabel,
            value: v.dictValue,
            key: v.dictValue,
          })),
        },
      },
      {
        field: 'description',
        component: 'InputTextArea',
        label: '备注',
        componentProps: {
          rows: 4,
        },
      },
    ],
    autoFocusFirstItem: true,
    actionColOptions: {
      span: 24,
    },
    labelWidth: 120,
    baseColProps: { span: 20 },
    submitButtonOptions: {
      text: '确认',
    },
    resetButtonOptions: {
      text: '取消',
    },
    submitFunc: async () => {
      const data: IDeviceDispenseData = await validate();
      console.log('data--->', data);
      setProps({
        submitButtonOptions: {
          loading: true,
        },
      });
      try {
        await DeviceDispense({
          ...data,
          tenantBefore: 0,
          tenantBeforeName: '平台',
          tenantAfterName: tenantAfterName.value,
          dispenseStatus: DispenseStatusEnum.ASSIGNED,
          createBy: userStore.getSysUserInfo.userName,
        });
        setProps({
          submitButtonOptions: {
            loading: false,
          },
        });

        createMessage.success('分配成功');
        emit('reload');
        closeModal();
      } catch (error) {
        setProps({
          submitButtonOptions: {
            loading: false,
          },
        });
      }
    },
    resetFunc: async () => {
      closeModal();
    },
  });

  const [register, { closeModal }] = useModalInner(async (data) => {
    data.row && setFieldsValue(data.row);
    setFieldsValue({
      dispenseType: DispenseTypeEnum.RENT,
    });
  });
</script>

<style lang="less" scoped></style>
